<template>
	<view>
		<view 
			class="project_wt_item" 
			v-for="(item,index) in data"
			:key="index">
			<view class="top">
				{{item.remark}}
			</view>
			<view class="bottom">
				<view class="bottom_left">
					{{item.projectTitle || ''}}
					<view>{{item.createTime}}</view>
				</view>
				<view class="bottom_right">
					<u-tag
						class="u-tag" mode="plain" type="info"
						:text="item.type"/>
					<u-tag
						class="u-tag"
						v-if="current != 0" 
						:text="item.state == 0 ? '待处理' : item.state == 100 ? '已完成' : '已超时'" 
						mode="light" 
						:type="item.state == 0 ? 'primary' : item.state == 100 ? 'success' : 'error'" />
					<u-button 
						v-if="current == 0" 
						size="mini" type="primary" 
						@click="handleProblem(item)">
						去处理
					</u-button>
				</view>
			</view>
			<view class="handlerContainer">
				<view class="list">
					<view class="title">提交人：</view>
					<view>{{item.creater}}</view>
				</view>
				<view class="list">
					<view class="title">指定处理人：</view>
					<view>{{item.currentDealer}}</view>
				</view>
				<view class="list">
					<view class="title">实际处理人：</view>
					<view>{{item.dealer ? item.dealer :'无'}}</view>
				</view>
			</view>
			<view class="handleBtn" v-if="current != 0">
				<u-button 
					size="mini" 
					:custom-style="{
						width:'60px',
						backgroundColor: '#5c77ff',
						color:'#ffffff',
					}" 
					@click="handleProblem(item)">
					查看详情
				</u-button>
			</view>
		</view>		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default { //项目推进item组件
		name: "PojectWtItem",
		props: {
			data: {
				default: {},
			},
			current: {
				default: 0,
			},
		},
		data() {
			return {
			};
		},
		methods: {
			handleProblem(val) {
				uni.navigateTo({
					url: `/pages/handleProject_wt/handleProject_wt?id=${val.id}`,
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.project_wt_item {
		width: 100%;
		background-color: #ffffff;
		height: fit-content;
		@include flex_layout_column;
		align-items: stretch;
		padding: 15px 0;
		box-sizing: border-box;
		border-bottom: 1px solid #ebebeb;
		.top {
			font-size: 14px;
			color: #323232;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.bottom {
			@include flex_layout_row;
			justify-content: space-between;
			align-items: center;
			.bottom_left {
				font-size: 11px;
				color: #757575;
				width: 65%;
			}
			.bottom_right {
				width: 135px;
				display: flex;
				justify-content: flex-end;
				.u-tag {
					margin-right: 5px;
				}
			}
		}
	}
	.wt_item {
		margin: 8px 25px;
	}
	.handleBtn{
		margin-top: 10px;
	}
	.handlerContainer{
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		.list{
			font-size: 11px;
			color: #757575;
			display: flex;
		}
		.title{
			text-align: right;
		}
	}
</style>
